<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue3-001</title>
    <script src="./vue3.js"></script>
</head>

<body>
    <div id="app">
        <h1>vue3</h1>
    </div>

    <script>
        /**mixin，自定义选项合并策略
         * 1. 组件挂载后，执行定义的选项策略，参数依次为父实例定义的值和子实例定义的值（此时父实例为空，子实例为mixin）
         * 2. 然后解析组件实例，执行定义的选项策略，此时父实例为mixin，子实例为当前组件
         * 3. 然后根据选项策略，返回最后的选项值
         * 最后的打印顺序：
         *      孙远杰  undefined
         *      华天晓  孙远杰
         *      华天晓
         */
        // console.log(Vue);
        var app = Vue.createApp({
            myname: '华天晓'
        })
        
        app.config.optionMergeStrategies.myname = function (parentVal, childVal) {
            console.log(childVal, parentVal)
            return childVal || parentVal
        }

        app.mixin({
            myname: '孙远杰',
            created() {
                console.log(this.$options.myname)
            }
        })

        app.mount('#app')
    </script>
</body>

</html>